<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Retro Board</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" href="webjars/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="webjars/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <meta http-equiv="refresh" content="30; URL=/">
</head>
<body>
<div class="container">
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <h1 class="navbar-brand">Retro Board</h1>
            </div>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="#"><span th:text="${time}"></span></a>
                </li>
                <li><a href="#"><form action="/logout" method="POST">
                    <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
                    <input type="submit" class="btn btn-default" value="Logout" />
                </form></a></li>
            </ul>
        </div>
    </nav>
    <form action="/comment" method="POST">
        <div class="row form-row">
            <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
            <div class="col-md-4"><i class="fa fa-plus"></i> Pluses
                <hr/>
                <div id="pluses" th:each="plus : ${plusComments}">
                    <div class="alert alert-info" role="alert">
                        <strong th:text="${plus.createdBy}"></strong>
                        <p th:text="${plus.comment}"></p>
                    </div>
                </div>
                <textarea id="plusComment" name="plusComment" class="form-control" style="min-width: 100%"></textarea>
            </div>
            <div class="col-md-4"><i class="fa fa-exclamation-triangle"></i> Deltas
                <hr/>
                <div id="deltas" th:each="delta : ${deltaComments}">
                    <div class="alert alert-warning" role="alert">
                        <strong th:text="${delta.createdBy}"></strong>
                        <p th:text="${delta.comment}"></p>
                    </div>
                </div>
                <textarea id="deltaComment" name="deltaComment" class="form-control" style="min-width: 100%"></textarea>
            </div>
            <div class="col-md-4"><i class="fa fa-asterisk"></i> Stars
                <hr/>
                <div id="stars" th:each="star : ${starComments}">
                    <div class="alert alert-success" role="alert">
                        <strong th:text="${star.createdBy}"></strong>
                        <p th:text="${star.comment}"></p>
                    </div>
                </div>
                <textarea id="starComment" name="starComment" class="form-control" style="min-width: 100%"></textarea>
            </div>
        </div>
        <div class="row form-row">
            <div class="col-md-4">
                <input type="submit" class="btn btn-default" value="Comment"/>
            </div>
        </div>
    </form>
    <footer class="fixed-bottom" style="position: fixed; bottom: 0">
        <div class="container">
            <span class="text-muted">Retro Board by Shazin Sadakath.</span>
        </div>
    </footer>
</div>
</body>
</html>
